import {useDispatch} from 'react-redux';
import {loadCameraConfigCreator} from '../../store/camera/cameraAction';
import Button from '../Button';
import React, {useRef} from 'react';
import {Text, View, TextInput, StyleSheet, Switch} from 'react-native';
import {useUpdate} from 'ahooks';
import {changeLightThreshold, changeScreenOff} from '../../store/setting/settingAction';

const ConfigScreen: React.FC = () => {
  const dispatch = useDispatch();
  let update = useUpdate();
  const lightThreshold = useRef('20');
  const screenOff = useRef('20');
  const zoom = useRef('0');
  const useFontCamera = useRef(false);
  const ratio43 = useRef(false);
  return (
    <View style={{padding: 15}}>
        <View style={styles.row}>
            <Text>亮度校准：</Text>
            <TextInput
                style={styles.input}
                onChangeText={(s) => {
                    lightThreshold.current = s
                    update()
                    dispatch(changeLightThreshold(s))
                }}
                value={lightThreshold.current}
                placeholder="亮度参数校准"
                keyboardType="numeric"
            />
        </View>
        <View style={styles.row}>
            <Text>熄屏间隔：</Text>
            <TextInput
                style={styles.input}
                onChangeText={(s) => {
                    screenOff.current = s
                    update()
                    dispatch(changeScreenOff(s))
                }}
                value={screenOff.current}
                placeholder="熄屏时间"
                keyboardType="numeric"
            />
            <Text> s</Text>
        </View>
        <View style={{flexDirection: "row", alignItems: "center"}}>
            <Text>相机缩放：</Text>
            <TextInput
                style={styles.input}
                onChangeText={(s) => {
                		zoom.current = s
                    update()
                    dispatch(loadCameraConfigCreator({zoom: zoom.current}));
                }}
                value={zoom.current}
                placeholder="相机缩放"
                keyboardType="numeric"
            />
        </View>
        <View style={{flexDirection: "row", alignItems: "center"}}>
            <Text style={{width: 100}}>后置摄像头</Text>
            <Switch
							style={styles.switch}
							value={useFontCamera.current}
							onValueChange={(value) => {
								useFontCamera.current = value;
								update()
								if (value) {
									dispatch(loadCameraConfigCreator({type: 'front'}));
								} else {
									dispatch(loadCameraConfigCreator({type: 'back'}));
								}
							}}
						/>
						<Text style={{width: 100}}>前置摄像头</Text>
        </View>
        <View style={{flexDirection: "row", alignItems: "center"}}>
            <Text style={{width: 100}}>4:3</Text>
            <Switch
							style={styles.switch}
							value={ratio43.current}
							onValueChange={(value) => {
								ratio43.current = value;
								update()
								if (value) {
									dispatch(loadCameraConfigCreator({ratio: '4:3'}));
								} else {
									dispatch(loadCameraConfigCreator({ratio: '16:9'}));
								}
							}}
						/>
						<Text style={{width: 100}}>16:9</Text>
        </View>
    </View>
  );
};
const styles = StyleSheet.create({
    input: {
        height: 40,
        width: 200,
        padding: 6,
        borderWidth: 1,
    },
    row: {
    	flexDirection: "row",
    	alignItems: "center",
    	marginBottom: 20
    },
    switch: {
			height: 40,
    }
});
export default ConfigScreen;
